{% extends "base.html" %}
{% block title %}{{title}}{% endblock %}
{% block body %}
<style>
    body {padding: 0px;}
    {% if is_desktop_mode and is_linux %}
    .alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transform: none;}
    .alertify-notifier{-webkit-transform: none;}
    .alertify-notifier .ajs-message{-webkit-transform: none;}
    .alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;}
    .sql-editor-busy-icon.fa-pulse{-webkit-animation: none;}
    {% endif %}
</style>
<div id="main-editor_panel">
    <div class="sql-editor">
        <div id="btn-toolbar" class="editor-toolbar" role="toolbar" aria-label="">
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-load-file" type="button" class="btn btn-sm btn-secondary btn-load-file"
                        title=""
                        accesskey=""
                        tabindex="0">
                    <i class="fa fa-folder-open-o sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <button id="btn-save-file" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        accesskey=""
                        disabled>
                    <i class="fa fa-floppy-o sql-icon-lg" aria-hidden="true" tabindex="0" role="img"></i>
                </button>
                <button id="btn-file-menu-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled
                        tabindex="0">
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" id="btn-file-menu-save" href="#" tabindex="0">
                            <span>{{ _('Save') }}</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-file-menu-save-as" href="#" tabindex="0">
                            <span>{{ _('Save As') }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-save-data" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        accesskey=""
                        tabindex="0" disabled>
                    <i class="pg-font-icon icon-save-data-changes sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-find" type="button" class="btn btn-sm btn-secondary" aria-label="{{ _('Find') }}" title="{{ _('Find (Ctrl/Cmd+F)') }}">
                    <i class="fa fa-search sql-icon-lg" aria-hidden="true" tabindex="0" role="img"></i>
                </button>
                <button id="btn-find-menu-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        title=""
                        accesskey=""
                        tabindex="0">
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" id="btn-find-menu-find" href="#" tabindex="0">
                            <span> {{ _('Find') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+F)') }}
                            {% else %}
                                 {{ _(' (Ctrl+F)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-find-menu-find-next" href="#" tabindex="0">
                            <span> {{ _('Find Next') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+G)') }}
                            {% else %}
                                 {{ _(' (Ctrl+G)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-find-menu-find-previous" href="#" tabindex="0">
                            <span> {{ _('Find Previous') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+Shift+G)') }}
                            {% else %}
                                 {{ _(' (Ctrl+Shift+G)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-find-menu-find-persistent" href="#" tabindex="0">
                            <span>{{ _('Persistent Find') }}</span>
                        </a>
                    </li>
                    <li class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item" id="btn-find-menu-replace" href="#" tabindex="0">
                            <span> {{ _('Replace') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+Shift+F)') }}
                            {% else %}
                                 {{ _(' (Ctrl+Shift+F)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-find-menu-replace-all" href="#" tabindex="0">
                            <span>{{ _('Replace All') }}</span>
                        </a>
                    </li>
                    <li class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item" id="btn-find-menu-jump" href="#" tabindex="0">
                            <span>{{ _('Jump (Alt+G)') }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-copy-row" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        accesskey=""
                        tabindex="0" disabled>
                    <i class="fa fa-files-o sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <button id="btn-copy-row-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        tabindex="0">
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" id="btn-copy-with-header" href="#" tabindex="0">
                            <i class="copy-with-header fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
                            <span> {{ _('Copy with headers') }} </span>
                        </a>
                    </li>
                </ul>
                <button id="btn-paste-row" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        accesskey=""
                        tabindex="0" disabled>
                    <i class="fa fa-clipboard sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-delete-row" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        accesskey=""
                        tabindex="0" disabled>
                    <i class="fa fa-trash sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-edit-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        aria-label="{{ _('Edit') }}" title="{{ _('Edit') }}" tabindex="0">
                    <i class="fa fa-pencil-square-o sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" id="btn-indent-code" href="#" tabindex="0">
                            <span> {{ _('Indent Selection (Tab)') }} </span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-unindent-code" href="#" tabindex="0">
                            <span> {{ _('Unindent Selection (Shift+Tab)') }} </span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-comment-line" href="#" tabindex="0">
                            <span> {{ _('Inline Comment Selection') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+/)') }}
                            {% else %}
                                 {{ _(' (Ctrl+/)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-uncomment-line" href="#" tabindex="0">
                            <span> {{ _('Inline Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+.)') }}
                            {% else %}
                                 {{ _(' (Ctrl+.)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-toggle-comment-block" href="#" tabindex="0">
                            <span> {{ _('Block Comment/Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Shift+Cmd+/)') }}
                            {% else %}
                                 {{ _(' (Shift+Ctrl+/)') }}{%- endif %}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-filter" type="button" class="btn btn-secondary"
                        title=""
                        accesskey=""
                        tabindex="0" disabled>
                    <i class="fa fa-filter sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <button id="btn-filter-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        title=""
                        accesskey=""
                        disabled tabindex="0">
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a id="btn-filter-menu" class="dropdown-item" href="#" tabindex="0">{{ _('Sort/Filter') }}</a>
                    </li>
                    <li>
                        <a id="btn-include-filter" class="dropdown-item" href="#" tabindex="0">{{ _('Filter by Selection') }}</a>
                    </li>
                    <li>
                        <a id="btn-exclude-filter" class="dropdown-item" href="#" tabindex="0">{{ _('Exclude by Selection') }}</a>
                    </li>
                    <li>
                        <a id="btn-remove-filter" class="dropdown-item" href="#" tabindex="0">{{ _('Remove Sort/Filter') }}</a>
                    </li>
                </ul>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <select id="btn-rows-limit" class="limit form-control form-control-sm" disabled
                        title=""
                        accesskey=""
                        tabindex="0">
                    <option value="-1">{{ _('No limit') }}</option>
                    <option value="1000">{{ _('1000 rows') }}</option>
                    <option value="500">{{ _('500 rows') }}</option>
                    <option value="100">{{ _('100 rows') }}</option>
                </select>
            </div>

            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-cancel-query" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        accesskey=""
                        tabindex="0" disabled >
                    <i class="fa fa-stop sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <button id="btn-flash" data-test-selector="execute-refresh-button" type="button" class="btn btn-sm btn-secondary" style="width: 32px;"
                        title=""
                        tabindex="0" data-click-counter="0" disabled>
                    <i class="fa fa-play sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <button id="btn-query-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        accesskey=""
                        title=""
                        tabindex="0">
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a class="dropdown-item" id="btn-auto-commit" href="#" tabindex="0">
                            <i class="auto-commit fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
                            <span> {{ _('Auto commit?') }} </span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-auto-rollback" href="#" tabindex="0">
                            <i class="auto-rollback fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
                            <span> {{ _('Auto rollback?') }} </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-explain" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        accesskey=""
                        tabindex="0" disabled>
                    <i class="fa fa-hand-pointer-o sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <button id="btn-explain-analyze" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        accesskey="" disabled>
                    <i class="fa fa-list-alt sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <button id="btn-explain-options-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        tabindex="0">
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" id="btn-explain-verbose" href="#" tabindex="0">
                            <i class="explain-verbose fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
                            <span> {{ _('Verbose') }} </span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-explain-costs" href="#" tabindex="0">
                            <i class="explain-costs fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
                            <span> {{ _('Costs') }} </span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-explain-buffers" href="#" tabindex="0">
                            <i class="explain-buffers fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
                            <span> {{ _('Buffers') }} </span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-explain-timing" href="#" tabindex="0">
                            <i class="explain-timing fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
                            <span> {{ _('Timing') }} </span>
                        </a>
                    </li>
                    <li data-min-ver="100000">
                        <a class="dropdown-item" id="btn-explain-summary" href="#" tabindex="0">
                            <i class="explain-summary fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
                            <span> {{ _('Summary') }} </span>
                        </a>
                    </li>
                    <li data-min-ver="120000">
                        <a class="dropdown-item" id="btn-explain-settings" href="#" tabindex="0">
                            <i class="explain-settings fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
                            <span> {{ _('Settings') }} </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-commit" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        accesskey=""
                        tabindex="0" disabled>
                    <i class="pg-font-icon icon-commit sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <button id="btn-rollback" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        tabindex="0" disabled>
                    <i class="pg-font-icon icon-rollback sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-clear-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        title=""
                        accesskey=""
                        tabindex="0">
                    <i class="fa fa-eraser sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" id="btn-clear" href="#" tabindex="0">
                            <span> {{ _('Clear Query Window') }} </span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" id="btn-clear-history" href="#" tabindex="0">
                            <span> {{ _('Clear History') }} </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-download" type="button" class="btn btn-sm btn-secondary"
                        title=""
                        tabindex="0">
                    <i class="fa fa-download sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
            </div>
        </div>

        <div class="connection_status_wrapper d-flex">
            <div id="btn-conn-status"
                 role="status"
                 class="connection_status d-flex justify-content-center align-items-center" data-container="body"
                 data-toggle="popover" data-placement="bottom"
                 data-content=""
                 data-panel-visible="visible"
                 accesskey=""
                 tabindex="0">
                <i class="pg-font-icon icon-query-tool-disconnected obtaining-conn d-flex m-auto" aria-hidden="true"
                    title="" role="img">
                </i>
            </div>
            <div class="editor-title"
                 style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% endif %}; color: {% if fgcolor %}{{ fgcolor }}{% endif %};">&nbsp;</div>
        </div>
        <div id="editor-panel" tabindex="0">
            <div id="fetching_data" class="pg-sp-container sql-editor-busy-fetching">
                <div class="pg-sp-content">
                    <div class="row">
                        <div class="col-12 pg-sp-icon sql-editor-busy-icon"></div>
                    </div>
                    <div class="row"><div class="col-12 pg-sp-text sql-editor-busy-text">{{ _('Loading...') }}</div></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block init_script %}
require(['sources/generated/browser_nodes', 'sources/generated/codemirror', 'sources/generated/slickgrid'], function() {
    require(['sources/generated/sqleditor'], function(ctx) {
        var $ = pgAdmin.SqlEditor.jquery,
            S = pgAdmin.SqlEditor.S,
            editorPanel = $('.sql-editor'),
            loadingDiv = $('#fetching_data'),
            msgDiv = loadingDiv.find('.sql-editor-busy-text');

        // Register unload event on window close.
        /* If opened in new tab, close the connection only on tab/window close and
         * not on refresh attempt because the user may cancel the reload
         */
        if(window.opener) {
          $(window).on('unload', function(ev) {
            $.ajax({
              method: 'DELETE',
              url: "{{ url_for('datagrid.index') }}" + "close/" + {{ uniqueId }}
            });
          });
        } else {
          $(window).on('beforeunload', function(ev) {
            $.ajax({
              method: 'DELETE',
              url: "{{ url_for('datagrid.index') }}" + "close/" + {{ uniqueId }}
            });
          });
        }

        // Get the controller object from pgAdmin.SqlEditor
        var sqlEditorController = pgAdmin.SqlEditor.create(editorPanel);

        // Listen on events to show/hide loading-icon and change messages.
        sqlEditorController.on('pgadmin-sqleditor:loading-icon:message', function(msg) {
            msgDiv.text(msg);
          }).on('pgadmin-sqleditor:loading-icon:show', function(msg) {
            loadingDiv.removeClass('d-none');
            msgDiv.text(msg);
          }).on('pgadmin-sqleditor:loading-icon:hide', function() {
            loadingDiv.addClass('d-none');
          });
        {% if script_type_url %}
            var script_type_url = '{{ script_type_url }}';
        {% else %}
            var script_type_url = '';
        {% endif %}
        // Start the query tool.
        sqlEditorController.start(
            {{ uniqueId }},
            {{ url_params|safe}},
            '{{ layout|safe }}'
        );

        // If opening from schema diff, set the generated script to the SQL Editor

        var schema_ddl_diff = (window.opener !== null) ? window.opener.pgAdmin.ddl_diff : (window.parent !== null) ? window.parent.pgAdmin.ddl_diff : window.top.pgAdmin.ddl_diff;
        sqlEditorController.set_value_to_editor(schema_ddl_diff);
        if (window.opener !== null) window.opener.pgAdmin.ddl_diff = '';
        else if (window.parent !== null) window.parent.pgAdmin.ddl_diff = '';
        else if (window.top !== null) window.top.pgAdmin.ddl_diff = '';

    });
});
{% endblock %}
